<template>
  <div class="list">
    <div class="top">
        <img :src="list.banner_url" alt="" >
        <h2>{{list.front_name}}</h2>
        <h1>
          <h5></h5>
          {{list.name}}
          <p></p>
        </h1>
        <van-grid :column-num="3">
          <van-grid-item v-for="(item,index) in list.subCategoryList" :key="index" :icon="item.wap_banner_url" :text="item.name" />
        </van-grid>
    </div>    
  </div>
</template>

<script>
export default {
    props:['list'],
   data () {
    return {
      show:true
    }
   },
   methods: {
     
   },
   created(){
   }
}
</script>

<style lang="less">
 .list{
    background-color:#fff ;
    height: 100%;
 }
 .top{
   padding: 0.1rem;
   text-align: center;
   position: relative;
   h2{
     height: 1.4rem;
     width: 94%;
     background-color: rgba(0,0,0,0.5);
     line-height: 1.4rem;
     color: #fff;
     font-size: large;
     position: absolute;
     top: 0.1rem;
     border-radius: 10px;
   }
   h1{
     height: 0.6rem;
     line-height: 0.6rem;
     font-size: large;
     position: relative;
     p{
     width: 0.5rem;  
     height: 0.05rem;
     background-color: #cccc;
     position: absolute;
     bottom: 0.3rem;
     left: 0.5rem;
   }
   h5{
    width: 0.5rem;  
     height: 0.05rem;
     background-color: #cccc;
     position: absolute;
     bottom: 0.3rem;
     left: 2.0rem;
   }
   }
   
 }
 img{
    height: 1.4rem;
    border-radius: 10px;
    width:100%;
 } 
 

</style>